<template>
	<view class="index" :style="'height:'+ this.h+'rpx'">
		<view class="notice"></view>
		<view class="body">
			<!-- 个人界面 -->
			<view class="head" style="" v-if="isLongin" @click="toMyinformation">
				<!-- 1 -->
				<view class="head_img">
					<image src="../../static/img/teache01.png"></image>
				</view>
				<!-- 2 -->
				<view class="head_name" style="letter-spacing:1.5rpx;">
					<view>{{$t('my.Name')}}：{{this.userInformation.username}}</view>
					<view>{{$t('my.Class')}}：{{this.userInformation.classId}}</view>
					<view>{{$t('my.Studentnumber')}}：{{this.userInformation.studentNumber}}</view>
				</view>
				<!-- 3 -->
				<view style="width: 20%;height: 100%;display: flex;">
					<image src="../../static/img/jiantou.png"
						style="width: 80rpx; height: 80rpx;margin: 70rpx 20rpx 70rpx 30rpx;"></image>
				</view>
			</view>
			
			<!-- 个人界面2 -->
			<view class="head" style="" v-if="!isLongin" @click="toLongin">
				<view class="login">
					<h1>登录</h1>
				</view>
				<view class="logImg">
					<image style="width: 64rpx;height: 64rpx;" src="../../static/img/jiantou.png" mode=""></image>
				</view>
			</view>
			
			<!-- 业务界面 -->
			<view class='my-content'>
				<view class="my-content-item" @click="myCourse()">
					<image src="../../static/img/kecheng.png" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;">
					</image>
					<view>{{$t('my.Mycourse')}}</view>
				</view>
				<view class="my-content-item">
					<image src="../../static/img/xiaoxi.png" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;">
					</image>
					<view>{{$t('my.Mymessage')}}</view>
				</view>
				<view @click="toPassword" class="my-content-item">
					<image src="../../static/img/mima2.png" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;"></image>
					<view>{{$t('my.Passwordmodification')}}</view>
				</view>
				<view @click="toProblemfeedback" class="my-content-item">
					<image src="../../static/img/fankui.png" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;">
					</image>
					<view>{{$t('my.Problemfeedback')}}</view>
				</view>
				<view class="my-content-item-1">
					<image src="../../static/img/shezhi.png" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;">
					</image>
					<view>{{$t('my.Systemsettings')}}</view>
				</view>
			</view>
			
			<view class="my-content-1" @click="quit">
				<view class="my-content-item-1">
					<image src="../../static/img/exit.png" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;"></image>
					<view>{{$t('my.Signout')}}</view>
				</view>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				isLongin: false,
				student_access_token: '',
				userInformation: [{
					username:'',
					classId:'',
					studnetNumber:''
				}],
				h: null
			}
		},
		onShow() {
			// this.getLoginInfo();
			let token = uni.getStorageSync('student_access_token');
			console.log("token:" + token);
			if (token == '' || token == null) {
				this.isLongin = false
			} else {
				this.isLongin = true
				this.userInformation.username = uni.getStorageSync("username");
				this.userInformation.classId = uni.getStorageSync("classId");
				this.userInformation.studentNumber = uni.getStorageSync("studentNumber");
			}
		},
		methods: {
			toLongin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			toPassword(){
				uni.navigateTo({
					url: '../password/password'
				})
			},
			async quit() {
				const res = await this.$myRequest({
					url: '/api/frontend/logout'
				})
				console.log(res);
				if (res.success) {
					uni.reLaunch({
						url: '../login/login'
					})
					uni.clearStorage();
				} else {
					uni.showToast({
						title: '退出失败'
					})
				}
			},
			
			// 跳转到我的课程 
			myCourse() {
				uni.navigateTo({
					url: "../myCourse/myCourse"
				})
			},
			toMyinformation() {
				uni.navigateTo({
					url:'../myInformation/myInformation'
				})
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					// console.log("手机可用高度:" + res.windowHeight * 2 + "rpx");
					// this.$store.commit('set_window_height', res.windowHeight * 2);
					this.h=res.windowHeight * 2;
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	.index {
		background-color: #e0e9fa;
	}
	// *{
	// 	margin: 0rpx;
	// 	padding: 0rpx;
	// }
	.body {
		width: 100%;
		position: absolute;
		top: -10rpx;
	}
	.notice {
		height: 80rpx;
		width: 100%;
		background-color: #3d94f3;
	}
	.head {
		/* 		width: 100%; */
		height: 220rpx;
		display: flex;
		background-color: #fff;
		border-radius: 15px;
		margin: 0rpx 20rpx 40rpx;
		position: relative;
		top: 20rpx;

		.login {
			flex: 6;
			margin-top: 8%;
			margin-left: 10%;
		}

		.logImg {
			flex: 1;
			margin-top: 10%;
			margin-right: 10%;
		}

		.head_img {
			width: 30%;
			height: 100%;

			image {
				width: 160rpx;
				height: 160rpx;
				margin: 30rpx 30rpx;
			}
		}
	}
	.head_name {
		color: #696969;
		margin-left: 20rpx;
		width: 50%;
		height: 100%;
		font-size: 30rpx;
		flex-direction: column;
		display: flex;
		justify-content: center;
	}

	.list_main {
		height: 50rpx;
	}

	.my-content {
		/* 		margin-top: 0;
		margin-bottom: 20rpx; */
		margin: 20rpx 20rpx;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 10px;
	}

	.my-content-1 {
		margin: 40rpx 20rpx;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 10px;
	}

	.my-content-item {
		font-size: 34rpx;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.my-content-item-1 {
		font-size: 34rpx;
		display: flex;
		align-items: center;
		padding: 15rpx 0;
	}

	/* 页背景图片 */
	.my-image {
		height: 100%;
		position: absolute;
		width: 100%;
		left: 0rpx;
		top: 0rpx;
		z-index: -1;
	}
</style>
